<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <ul class="songList">
        <li class="songInfo" v-for="item in list" :key="item.id">
          <h2 class="songName">
            {{ item.name }}
          </h2>
          <span class="singerName" v-for="list in item.singer" :key="list.id"> {{ list.name }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  props: {
    list: {
      type: Array
    }
  },
  // watch: {
  //   list () {
  //     this.scroll.refresh()
  //   }
  // },
  mounted () {
    const options = {
      click: true,
      tap: true,
      mouseWheel: true, // 开启鼠标滚轮
      disableMouse: false, // 启用鼠标拖动
      disableTouch: false // 启用手指触摸
    }
    this.scroll = new BScroll(this.$refs.wrapper, options)
  },
  updated () {
    this.$nextTick(() => {
      this.scroll.refresh()
    })
  }
}
</script>

<style lang="stylus" scoped>
.wrapper {
  position: fixed;
  top: 44px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow:hidden;
  .songList {
    padding: 0px 20px 20px;
    .songInfo {
      padding-top: 10px;
      .songName {
        line-height:20px;
        max-width:260px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .singerName {
        font-size: 12px;
        line-height:20px;
        color: #6d6d6d;
      }
    }
  }
}

</style>
